<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="row">
    <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
        <h1 class="page-title txt-color-blueDark"><i class="fa fa-bar-chart-o fa-fw "></i> 图形
            <span>>请求数量</span></h1>
    </div>
    <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
        <ul id="sparks" class="">
            <li class="sparks-info">
                <h5> My Income <span class="txt-color-blue">$47,171</span></h5>
                <div class="sparkline txt-color-blue hidden-mobile hidden-md hidden-sm">
                    1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471
                </div>
            </li>
            <li class="sparks-info">
                <h5> Site Traffic <span class="txt-color-purple"><i class="fa fa-arrow-circle-up"
                                                                    data-rel="bootstrap-tooltip" title="Increased"></i>&nbsp;45%</span>
                </h5>
                <div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm">
                    110,150,300,130,400,240,220,310,220,300, 270, 210
                </div>
            </li>
            <li class="sparks-info">
                <h5> Site Orders <span class="txt-color-greenDark"><i class="fa fa-shopping-cart"></i>&nbsp;2447</span>
                </h5>
                <div class="sparkline txt-color-greenDark hidden-mobile hidden-md hidden-sm">
                    110,150,300,130,400,240,220,310,220,300, 270, 210
                </div>
            </li>
        </ul>
    </div>
</div>


<section id="widget-grid" class="">
    <div class="row">
        <form>
            <fieldset class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                <div class="form-group">
                    <select class="select2" id="service_select">
                        <c:forEach items="${services}" var="service">
                            <option value="${service}">${service}</option>
                        </c:forEach>
                    </select>
                </div>
            </fieldset>
            <fieldset class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                <div class="form-group">
                    <select class="select2" id="method_select">
                        <c:forEach items="${methods}" var="mehod">
                            <option value="${mehod}">${mehod}</option>
                        </c:forEach>
                    </select>
                </div>
            </fieldset>
        </form>
    </div>
    <div class="row">
        <!-- NEW WIDGET START -->
        <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="jarviswidget" id="wid-id-1" data-widget-editbutton="false">
                <header>
                    <span class="widget-icon"> <i class="fa fa-bar-chart-o"></i> </span>
                    <h2>Chart</h2>
                    <div class="widget-toolbar">
                        <button class="btn dropdown-toggle btn-xs btn-primary" id="all">
                            总体
                        </button>
                        <div class="btn-group">
                            <button class="btn dropdown-toggle btn-xs btn-success" data-toggle="dropdown">
                                选择节点 <i class="fa fa-caret-down"></i>
                            </button>
                            <ul class="dropdown-menu pull-right js-status-update" id="nodes">
                                <c:forEach items="${nodes}" var="node">
                                    <li><a href="javascript:void(0);">${node}</a></li>
                                </c:forEach>
                            </ul>
                        </div>
                    </div>
                </header>
                <div>
                    <div class="jarviswidget-editbox">
                    </div>
                    <div class="widget-body">
                        <div id="container"></div>
                    </div>
                </div>
            </div>
        </article>
    </div>
</section>
<script type="text/javascript">
    pageSetUp();
    var pagefunction = function () {

        loadAll();
        $("#service_select").change(function () {
            $.request("/soa/invoke_service", {"service": $('#service_select').val(), "node": 1}, function (content) {
                $("#method_select").empty();
                if (content.services.length > 0) {
                    $(content.services).each(function (i, json) {
                    	/* 此处是新增丢失的数据  */
                    	$("#select2-chosen-4").html(json);
                        $("#method_select").append('<option value="' + json + '">' + json + '</option>');
                    });
                    loadAll();
                }
                if (content.nodes.length > 0) {
                    $("#nodes").empty();
                    $(content.nodes).each(function (i, node) {
                        $("#nodes").append('<li><a href="javascript:void(0);" id="mt' + i + '">' + node + '</a></li>');
                    });
                    loadNodes();
                }
            });
        });
        $("#method_select").change(function () {
            loadAll();
        });

        $("#service_select,#method_select").select2({
            width: "100%",
        });
        $("#all").click(function () {
            loadAll();
        });
        loadNodes();
    };

    function loadNodes() {
        $("#nodes").find("li a").bind("click", function () {
            refresh({
                "service": $('#service_select').val(),
                "method": $('#method_select').val(),
                "hostPort": $(this).text()
            }, "请求次数", "/soa/invoke_count", "/soa/invoke_dy_totalCount", '数量', '');
        });
    }
    function loadAll() {
        if ($("#service_select").val() && $("#method_select").val()) {
            refresh({
                "service": $('#service_select').val(),
                "method": $('#method_select').val()
            }, "请求次数", "/soa/invoke_count", "/soa/invoke_dy_totalCount", '数量', '');
        }
    }
    loadScript("/static/js/highcharts.js", function () {
        loadScript("/static/js/chart.js", pagefunction);
    });
</script>
